<template>
  <!-- 数据列表头部的表述 -->

  <div class="data-list-header">
    <div class="data-list-header-left">
      数据列表 数据共 {{ formData.total }} 条
    </div>
    <div class="data-list-header-right">
      <!-- 定义可插槽按钮 -->
      <slot name="dataListHeaderButton" />

      <el-button type="primary" @click="_add">新增</el-button>
      <el-button type="danger" @click="_deleteCheck">批量删除</el-button>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    // 数据列表 数据共 XX 条
    formData: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      pageData: null
    }
  },
  mounted() {
    this.pageData = this.formData
  },
  methods: {
    // 新增/批量删除
    _add() {
      // 当数据没有加载完成时，新增按钮不可用
      if (!this.formData.listLoading) {
        // this.$eventBus.$emit('add', 'add')
        // 显示 新增/编辑 弹框
        this.pageData.popUpFlag = true
        this.pageData.AddEdit = 'add'
        this.pageData.AddEditText = '新增数据模版'
      }
    },

    // 删除单条数据 事件
    _deleteCheck() {
      // 当数据没有加载完成时，批量删除按钮不可用
      if (!this.formData.listLoading) {
        const { batchDelData } = this.formData // 批量删除 的数据

        if (batchDelData.length > 0) {
          console.log('批量删除 的数据', batchDelData)
          this.$confirm('此操作将永久删除选中的数据, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            // 此处调用删除数据接口 进行循环删除数据
            batchDelData.forEach(item => {
              console.log(item)
            })

            this.$message({
              type: 'success',
              message: '删除成功!（批量删除的逻辑写这里）'
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
        } else {
          this.$message({
            message: '您没有批量删除的东西！请先进行选择！',
            type: 'warning'
          })
        }
      }
    }
  }
}
</script>

<style lang='scss' scoped>
// 数据列表头
.data-list-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #efefef;
  padding: 20px 0;
}
</style>
